<template>
   <a-row  >
      <!-- 部门信息 -->
      <a-col  :md='24'  :sm='24'  :xl='6'  :lg='8'>
        <h3  class='fontWeight'>部门信息</h3>
        <a-divider />
        <a-tree  v-if='treeDataDepart.length'
            :treeData="treeDataDepart"  defaultExpandAll  
          >
            <template  slot="custom"  slot-scope="item" @mouseenter='mouseenter($event)' @mouseleave='mouseleave($event)'  >
                <span>{{ item.name }}</span>
                <a-tooltip    title="添加" >
                    <a-icon   type="plus-circle"  class="btn_type"   @click="()=> appendDepart(item)"/>
                </a-tooltip  >
                <a-tooltip    title='编辑' >
                    <a-icon   type="edit"         v-if='item.parentCode!="rootroot"  '  class="btn_type  "   style='right:50px'  @click="()=> editDepart(item)"/>
                </a-tooltip>
                <a-popconfirm title="确认删除该部门?"   @confirm="confirmDelDepart(item.code)"  okText="确认" cancelText="取消">
                    <a-icon   type="delete"       v-if='item.parentCode!="rootroot"'  class="btn_type  "   style='right:30px' />
                </a-popconfirm>
            </template>
        </a-tree>
      </a-col>
      <!-- 用户信息 -->
      <a-col  :md='24'  :sm='24'  :xl='17'  :lg='15'  offset='1'>
        <h3  class='fontWeight'>用户信息</h3>
        <a-button  type="dashed"   class='mb16  mt12  ml20'  @click='addUser()'><a-icon type="plus-circle" />添加</a-button>
        <a-table :columns="columns"
          :rowKey="record => record.code"
          :dataSource="dataUser"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
            <span slot="action" slot-scope="text, record"  > 
              <a-popconfirm title="确认停用该用户？" @confirm="optionsUser(record.code,1)"   okText="确认" cancelText="取消"  v-if='record.useable==1'>
                <a  class='color-blue'  >停用</a>
              </a-popconfirm>
              <a-popconfirm title="确认启用该用户？" @confirm="optionsUser(record.code,0)"   okText="确认" cancelText="取消"  v-else>
                <a  class='color-blue'  >启用</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a  class='color-blue'  @click='editUser(record.code)'>编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确认删除当前数据？" @confirm="confirmDelUser(record.code)"   okText="确认" cancelText="取消">
                  <a href="javascript:;"  class='color-red'>删除</a>
              </a-popconfirm>
            </span>
        </a-table>
      </a-col>
      <!-- depart-modal -->
    <addDepartment  ref='departModal' :visible='showAddD'  :departData='DepartData'  v-on:handleCancel='showAddD=false'  v-on:handleOk='handleOkDepart()'></addDepartment>
    <!-- user-modal -->
    <addUser  ref='userModal' :visible='showAddUser'  :departData='DepartData' :roleData='roleData'  v-on:handleCancel='showAddUser=false'  v-on:handleOk='handleOkUser()'></addUser>
   </a-row>
</template>

<script>
import  addDepartment  from  '@/components/system/userlist/addD'
import  addUser  from  '@/components/system/userlist/addUser'

import  { listDepart,delDepart,listUser,delUser,optionUser,RoleInit }  from  '@/api/system/index'
// const treeData = [{
//   title: '奥利维亚',
//   key: '0-0',
//   scopedSlots: { title: 'custom' },
//   children: [],
// }]

const columns = [
  { title: '姓名',
    dataIndex: 'name',
    // sorter: true,
    // width: '20%',
    scopedSlots: { customRender: 'name' },
  }, {
    title: '登录名',
    dataIndex: 'loginName',
    
  }, {
    title: '角色',
    dataIndex: 'roleName',
  },{
    title: '部门',
    dataIndex: 'officeName',
  },{
    title: '联系方式',
    dataIndex: 'mobile',
  },  
   {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];

export default {
  name: 'userlist',
  data () {
    return {
      DepartData:[],/*部门原始data 传递给组件*/
      treeDataDepart:[],/*部门树data*/
      showAddD:false,/*部门编辑 - 新增modal*/

      showAddUser:false,/*用户编辑 - 新增modal*/
      roleData:[],//传递给用户的角色option
      dataUser:[],/*用户列表*/
      
      searchUser:{// userlist请求参数
        pageNo:0,
        pageSize:10
      },
      pagination: {
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },
      loading: false,
      columns,
     
    }
  },
  created(){
      //部门初始化
      this.DepartInit()
      this.UserInit()
      this.roleList() 
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  },
  methods:{
    /*初始化数据*/
    //部门初始化
    DepartInit(){
        listDepart().then((res)=>{
          this.DepartData = res.data.dataList
          this.formTree(this.DepartData)
        })
    },
    UserInit(){
      this.loading = true
        listUser(this.searchUser).then((res)=>{
          this.dataUser = res.data.dataList
          this.pagination.total = res.data.totalRs
          this.loading  = false
        })
    },
    roleList(){
      RoleInit('/sys/role/get_role_list',{pageSize:100,pageNo:1}).then((res)=>{
        this.roleData = res.data.dataList
      })
    },

    /*功能函数*/
      /*------部门操作------*/
      /*add*/
    appendDepart(item){
      this.$refs.departModal.$emit('openDialog' , item.code )
      this.showAddD = true
    },
    handleOkDepart(){
      this.showAddD = false
      this.DepartInit()
    },
    editDepart(item){
      this.$refs.departModal.$emit('editDialog' , item )
      this.showAddD = true
    },
    confirmDelDepart (code) {
      delDepart(code).then((res)=>{
          this.$message.info(res.data.msg)
          this.DepartInit()
      })
    },

      /*------用户操作------*/
    addUser(){
        this.$refs.userModal.$emit('openDialog')
        this.showAddUser = true
    },
    handleOkUser(){
      this.showAddUser = false
      this.UserInit()
    },
    editUser(code){
        this.$refs.userModal.$emit('editDialog',code)
        this.showAddUser = true
    },
    confirmDelUser(code){
        delUser(code).then((res)=>{
            this.$message.info(res.data.msg)
            this.UserInit()
        })
    },
    optionsUser(code,num){
      let url =''
      if(num == 1){
        url='/sys/user/lock_user'//停用 用户
      }
      if(num == 0){
        url = '/sys/user/unlock_user'//启用 用户
      }
        optionUser(url,code).then((res)=>{
            this.$message.info(res.data.msg)
            this.UserInit()
        })
    },

    /*工具函数*/
    //data 转换为 树类型
    formTree(departList){
        let data = [];

        departList.forEach((item)=>{
          if( item.parentCode == 'rootroot'){
              data.push({
                key:item.code,
                name:item.name,
                code:item.code,
                parentCode:item.parentCode,
                phone:item.phone,
                address:item.address,
                scopedSlots: { title: 'custom' },
              })
          }
        })
        // console.log(this.departList)
        this.formNextTreeTest(departList,data)
    },
    //二级及以上 树类型
    formNextTreeTest(departList,data){
          data.forEach((item,index)=>{
          let child= []
          departList.forEach((it)=>{
              if(item.code == it.parentCode){
                  child.push({
                    key:it.code,
                    name:it.name,
                    code:it.code,
                    parentCode:it.parentCode,
                    phone:it.phone,
                    address:it.address,
                    scopedSlots: { title: 'custom' },
                  })
              }
            })
            item.children=child
            if(child.length>0){
                this.formNextTreeTest(departList,child) //递归
            }
          })
          this.treeDataDepart = data
    },

    /*组件基础函数*/ 
    /*table页数变化*/
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.searchUser.current = pagination.current
        this.searchUser.pageSize =pagination.pageSize
        this.UserInit()
    },
  },
  components:{
    addDepartment,
    addUser
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn_type{float: right;position: absolute;right: 70px;margin-top: 5px;}
</style>
